<template>
	<view>
	<view class="index-content">
		<view class="index-header">
			 <view class="user-info">上午好，王先生</view>
			 <view class="p-bgimg"></view>
		</view>
		 <view class="list-view-tick">
         <view class="item">
					  <view class="top-title">距离开场：3小时25分
							<iconArrow :point="1" :color="'#F24244'" />
								<view class="btn-right">查看取票码</view>
						</view>
						<view class="location">
                <iconLocation  />
						</view>
						<view class="title">战斗天使阿丽塔</view>
						<view class="role-content">UME影城（重庆沙坪坝店） </view>
						<view class="scene-content">渝北区青云路1号</view> 
						<view class="btn-box">6号IMAX厅</view> 
						<view  class="next-cat">A排 16号  B排 17号</view>
						<image class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575454802250&di=b6201362df15f1968ec242482f172a54&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F41%2F70%2F82q58PIC4GH_1024.jpg" />
				</view> 
		 </view>
  		<view class="list-view-nearby">
         <view class="item">
					  <view class="top-title" @click="btnGOstudios">离你最近的影院 <iconArrow :point="1" /></view>
						<view class="title">战斗天使阿丽塔</view>
						<view class="role-content">UME影城（重庆沙坪坝店） </view>
						<view class="scene-content">3km</view> 
						<image class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575454802250&di=b6201362df15f1968ec242482f172a54&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F41%2F70%2F82q58PIC4GH_1024.jpg" />
				</view> 
		 </view> 
			<view class="f-tab">
				<view class="i-color"></view>
				<view class="item" :class="{on:tabType===1}" @click="changeTab(1)">正在热映</view>
				<view class="c-line-item"></view>
				<view class="item" :class="{on:tabType===2}" @click="changeTab(2)">即将上映</view>
				<view class="btn-right" @click="btnGoFilm"> 全部40部</view>
				<iconArrow :point="1" />
			</view>
			<view class="c-list">
				<view class="item" v-for="(item,index) in areaList" :key="index">
					  <image class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575454802250&di=b6201362df15f1968ec242482f172a54&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F41%2F70%2F82q58PIC4GH_1024.jpg" />
						<view class="title">罗小黑战绩 <text class="tiptxt">免</text> </view>
						<!-- <view class="role">小猪猪 </view> -->
						<view class="role-content">主演：贸小七、王大锤、牛逼啊...... </view>
						<view class="scene-content">今天235家影厅放映2465场</view> 
						<view class="price"><text class="unit">￥</text>45</view>
						<view class="b-line" />
						<view class="btn-buy" @click="btnBuy(item)">购买</view>
				</view>
		</view>
		</view>
	<footerMenu />
	</view>
</template>
<script>
import footerMenu from '../components/footer';
import iconArrow from '../components/icon-arrow';
import iconLocation from '../components/icon-location';
	export default {
	components: {
		footerMenu,
		iconArrow,
		iconLocation
  },
		data() {
			return {
				captchaImg:'',
				tabType:1,
				areaList:[1,2,3]
			}
		},
		onLoad() {
				//this.$message('请输入正确的手机号');
				// var self = this
				// 	self.$api.ajax({
		    //     	url:'/member/cinema/list',
		    //     	method:'GET',
		    //     	success:function(res){
				// 				  console.log(res);
		    //     	}
		    //   })
		},
		methods: {
      btnGOstudios(){
				this.$api.goPage('/pages/index/studios');
			},
			btnBuy(){
				this.$api.goPage('/pages/index/seat');
			},
      btnGoFilm(){
				this.$api.goPage('/pages/index/film_list');
			},
			changeTab(type){
				this.tabType = type;
			}
		}
	}
</script>

<style  lang="scss" scoped>
.index-content{
	overflow-y:scroll;
	height: 100vh;
	-webkit-overflow-scrolling: touch;
	padding-bottom: px2vw(80);
}
	.index-header {
		text-align: center;
		height: px2vw(245);
		width: 100%;
		background: #333;
		position: relative;
		border-bottom-left-radius: px2vw(15);
		border-bottom-right-radius: px2vw(15);
		.user-info{
			position: absolute;
			left: px2vw(15);
			top: px2vw(80);
			color: #fff;
			font-size: px2vw($fz18);

		}
		.p-bgimg{
			border-radius: px2vw(10);
			height: px2vw(165);	
			width: px2vw(345);
			position: absolute;
			left: 50%;
			bottom: - px2vw(50);
			margin-left: - px2vw(172.5);
			background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575454802250&di=b6201362df15f1968ec242482f172a54&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F41%2F70%2F82q58PIC4GH_1024.jpg');
			background-position: center;
			background-size: cover;
			box-shadow: 0 px2vw(4) px2vw(30) #888;
		}
	}
	.list-view-tick{
		width: px2vw(355);
		margin: px2vw(70) auto px2vw(30) auto;
    .item{
			width: px2vw(355);
			height: px2vw(210);
			margin: 0 auto;
			position: relative;
			border-radius: px2vw(10);
			background-color: #fff;
			box-shadow: 0 px2vw(4) px2vw(30) #d8d3d3;
			.top-title{
					height: px2vw(44);
					line-height: px2vw(44);
					font-size: px2vw($fz14);
					padding-left: px2vw(10);
					background-color: #FFFBEB;
					border-top-left-radius: px2vw(10);
					border-top-right-radius: px2vw(10);
					border-bottom:px2vw(1) dashed #ddd;
					position: relative;
			}
			.location{
				position: absolute;
        height: px2vw(15);
				width: px2vw(15);
				top: 50%;
				margin-top: - px2vw(7.5);
				right: px2vw(7.5);
			}
			.btn-right{
				position: absolute;
				right: px2vw(30);
				font-size: px2vw($fz14);
				top: 50%;
				color: #000;
				height: px2vw(30);
				line-height: px2vw(30);
				margin-top: - px2vw(15);
			}
			.title{
							 font-size: px2vw($fz18);
							 font-weight:600;
							 position: absolute;
							 top: px2vw(65);
							 left: px2vw(117);
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						.scene-content,
						 .role-content {
						 	 font-size: px2vw($fz14);
							 position: absolute;
							 top: px2vw(96);
							 left: px2vw(118);
							 color: #888;
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						 .scene-content{
								top: px2vw(120);
								font-size: px2vw($fz12);
						 }
						 .btn-box{
               font-size: px2vw($fz16);
							 position: absolute;
							 top: px2vw(140);
							 left: px2vw(118);
							 color: #F24244;
							 border: px2vw(1.2) solid #F24244;
							 text-align: center;
							 border-radius: px2vw(5); 
							 height: px2vw(25);
							 line-height: px2vw(25);
							 padding: 0 px2vw(10);
						 }
						 	.next-cat{
               font-size: px2vw($fz14);
							 position: absolute;
							 top: px2vw(170);
							 left: px2vw(118);
							 color: #F24244;
							 text-align: center;
						 }
			     .img{
							 height: px2vw(120);
							 width: px2vw(83);
							 position: absolute;
							 top: px2vw(68);
							 left: px2vw(18);
						 }
		}
	}

	.list-view-nearby{
		width: px2vw(355);
		margin: px2vw(20) auto px2vw(30) auto;
    .item{
			width: px2vw(355);
			height: px2vw(160);
			margin: 0 auto;
			position: relative;
			border-radius: px2vw(10);
			background-color: #fff;
			box-shadow: 0 px2vw(4) px2vw(30) #d8d3d3;
			.top-title{
					height: px2vw(44);
					line-height: px2vw(44);
					font-size: px2vw($fz18);
					padding-left: px2vw(10);
					color: #000;
					background-color: #FFFBEB;
					border-top-left-radius: px2vw(10);
					border-top-right-radius: px2vw(10);
					border-bottom:px2vw(1) dashed #ddd;
					font-weight: 600;
					position: relative;
			}
			.btn-right{
				position: absolute;
				right: px2vw(15);;
				font-size: px2vw($fz14);
				top: px2vw(15);
				color: #000;
			}
			.title{
							 font-size: px2vw($fz18);
							 font-weight:600;
							 position: absolute;
							 top: px2vw(65);
							 left: px2vw(19);
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						.scene-content,
						 .role-content {
						 	 font-size: px2vw($fz14);
							 position: absolute;
							 top: px2vw(96);
							 left: px2vw(19);
							 color: #888;
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						 .scene-content{
								top: px2vw(120);
								font-size: px2vw($fz12);
						 }
			     .img{
							 height: px2vw(58);
							 width: px2vw(47);
							 position: absolute;
							 top: px2vw(68);
							 right: px2vw(18);
							 box-shadow: px2vw(7) px2vw(4) px2vw(5) #888;
							 border-radius: px2vw(6);
						 }
		}
	}
	.f-tab{
	  	display: flex;
			width: px2vw(355);
			margin: 0 auto;
			position: relative;
		.item{
			height:  px2vw(30);
			line-height:  px2vw(30);
			font-size: px2vw($fz18);
			font-weight: 600;
			color: #888;
			padding-left: px2vw(15);
		}
		.on{
			color: #333;
		}
		.c-line-item{
			padding: 0 px2vw(10);
			border-right: px2vw(0.5) solid #ddd;
			height:  px2vw(20);
			margin-top:px2vw(5); 
		}
		.i-color{
			background-color: #FA9529;
			height:px2vw(16);
			width:px2vw(8);
			position: absolute;
			left: 0;
			top: 50%;
			margin-top:- px2vw(8);
		}
		.btn-right{
			position: absolute;
			right:px2vw(30);
			top: 0;
			height:  px2vw(30);
			line-height:  px2vw(30);
			font-size: px2vw($fz14);
			.right-img{
					height:  px2vw(20);
			}
		}
	}

	.c-list{
			width: px2vw(355);
			margin: 0 auto px2vw(90) auto;
			.item{
						height: px2vw(140);
						width: 100%;
						position: relative;
						color: #000;
						 .img{
							 height: px2vw(95);
							 width: px2vw(70);
							 border-radius: px2vw(8);
							 position: absolute;
							 top: px2vw(25);
							 left: 0;
						 }
						 .title{
							 font-size: px2vw($fz18);
							 font-weight:600;
							 position: absolute;
							 top: px2vw(25);
							 left: px2vw(85);
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
							 .tiptxt{
								 font-size: px2vw($fz12);
								 background-color: #F24244;
								 color: #F1F1F1;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-left: px2vw(6);
							 }
						 }
						 .role{
						 	 font-size: px2vw($fz12);
							 position: absolute;
							 top: px2vw(55);
							 left: px2vw(85);
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						 .price,
						 .scene-content,
						 .role-content {
						 	 font-size: px2vw($fz12);
							 position: absolute;
							 top: px2vw(54);
							 left: px2vw(85);
							 color: #888;
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						 .scene-content{
							  top: px2vw(73);
						 }
						 .price{
							 top: px2vw(100);
							 font-size: px2vw($fz18);
							 color: #FF5400;
							 font-weight: 600;
							 .unit{
								 font-size: px2vw($fz12);
							 }
						 }
						.b-line{
							border: px2vw(0.5) solid #eee;
							position: absolute;
							bottom: 0;
							right: 0;
							width: px2vw(275);
						}
						.btn-buy{
							background-color: #F24244;
							height:  px2vw(30);
							line-height:  px2vw(30);
							width:  px2vw(65);
							border-radius: px2vw(25);
							box-shadow: 0 px2vw(0.5)  px2vw(2)  #D2383A;
							position: absolute;
							right: 0;
							top: 50%;
							margin-top: - px2vw(15);
							text-align: center;
							font-size: px2vw($fz16);
							color: #fff;
						}
				}
	}
</style>
